<template>
  <div class="quarterly--container-padding">
    <div class="buttonList">
      <!-- <el-button>保存为草稿</el-button> -->
      <el-button type="primary" @click="submit">确认提交</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="quarterly-form-inline">
      <el-form-item label="季报期数：">
        <el-input
          v-model="formInline.quarterNumber"
          disabled
          placeholder=" 请输入"
          clearable
        />
      </el-form-item>
      <el-form-item label="项目名称：">
        <el-select
          v-model="formInline.projectId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.topicId"
            :label="item.topicName"
            :value="item.topicId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :model="formInline" label-position="top" class="quarterly-form">
      <el-form-item label="任务计划">
        <el-input
          v-model="formInline.taskPlan"
          placeholder=" 请输入"
          clearable
          :autosize="{ minRows: 10, maxRows: 15 }"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="完成情况">
        <el-input
          v-model="formInline.completionDescription"
          placeholder=" 请输入"
          clearable
          :autosize="{ minRows: 10, maxRows: 15 }"
          type="textarea"
        />
      </el-form-item>
    </el-form>

    <uploadFile
      style="margin-top: 2px"
      :file-list="file"
      @upload:success="handleUploadSuccess"
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive, computed, onMounted } from 'vue'
  import uploadFile from './uploadFile.vue'
  import { selectTopicList } from '@/api/project/index'
  import { updateQuarterly, getQuarterlyInfo } from '@/api/postdoctor'
  import { useRoute } from 'vue-router'
  import dayjs from 'dayjs'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  // 计算当前季度
  const currentQuarter = computed(() => {
    const year = dayjs().year()
    const month = dayjs().month() // 获取当前月份，注意dayjs的月份是从0开始的
    const quarter = Math.floor(month / 3) + 1 // 计算季度
    return `${year}年第${quarter}季度`
  })

  const formInline = ref({
    quarterNumber: currentQuarter.value,
    projectId: '',
    taskPlan: '',
    completionDescription: '',
  })
  const projectOptions = ref([])
  const file = ref([])
  const route = useRoute()
  const { closeTabNavigate } = useCloseTabNavigate()
  const getTopic = () => {
    selectTopicList({ type: 1 }).then((res: any) => {
      if (res.code == 0 || res.code == 200) {
        const list = res.data
        projectOptions.value = list
      }
    })
  }

  const handleUploadSuccess = (data: UploadUserFile[]) => {
    file.value = data
  }

  const submit = () => {
    const params = {
      personnelId: route.query.id,
      ...formInline.value,
    }
    params.relatedDocuments = file.value.map((item) => {
      return {
        fileName: item.name,
        fileId: item.id,
        fileUrl: item.url,
        businessType: 'POSTDOC_QUARTERLY_REPORT_ATTACHMENT',
        fileType: item.type,
        businessId: '14',
      }
    })

    updateQuarterly(params).then((res) => {
      ElMessage.success('提交成功')
      closeTabNavigate({
        name: 'DetailsPersonnel',
        query: { id: route.query.id },
      })
    })
  }

  const getInfo = () => {
    getQuarterlyInfo({ id: route.query.quarterlyId }).then((res) => {
      formInline.value = res.data
    })
  }

  onMounted(() => {
    getTopic()
    getInfo()
  })
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;
  .buttonList {
    display: flex;
    justify-content: end;
    margin-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    padding-bottom: $margin-bottom;
  }

  .quarterly-form-inline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 16px;
    grid-column-gap: 20px;
    margin-bottom: 20px;
    :deep(.el-form-item__label) {
      padding: 0 5px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 0px;
      margin-bottom: 0px;
    }
  }
</style>
